<template>
    <div>
        <h1>添加</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>户型名称：</td>
                    <td>
                        <input type="text" v-model="data.houseName">
                    </td>
                </tr>
                <tr>
                    <td>户型结构：</td>
                    <td>
                        <select v-model="data.typeName">
                            <option value="请选择">请选择</option>
                            <option value="朝阳">朝阳</option>
                            <option value="不朝阳">不朝阳</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>建筑面积：</td>
                    <td>
                        <input type="text" v-model="data.jianzhumianji">
                    </td>
                </tr>
                <tr>
                    <td>套内面积：</td>
                    <td>
                        <input type="text" v-model="data.taoneimianji">
                    </td>
                </tr>
                <tr>
                    <td>图片：</td>
                    <td>
                        <input type="file" @change="file">
                        <img :src="'https://localhost:7280'+data.houseImg" alt="" style="width: 100px; height: 100px;">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="添加" @click="Add">
                        <a href="Show">返回列表</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import axios from 'axios';
const file=(e:any)=>{
    var f=e.target.files[0];
    if(f.size>1024*1024)
    {
        alert("大于1MB了")
        return;
    }
    
    var fd=new FormData();
    fd.append("f1",f);
    axios.post("https://localhost:7280/api/File/TuPian",fd).then(res=>{
        data.value.houseImg=res.data;
    })
}
const data=ref({
    "houseId": 0,
    "houseName": "",
    "typeName": "",
    "jianzhumianji": 0,
    "taoneimianji": 0,
    "houseImg": "",
    "deleId": 0
})
const Add=()=>{
    if(data.value.houseName=="")
    {
        alert("户型名称不能为空");
        return;
    }
    if(data.value.typeName=="请选择")
    {
        alert("户型结构不能为空");
        return;
    }
    if(data.value.jianzhumianji==0)
    {
        alert("建筑面积不能为空");
        return;
    }
    if(data.value.taoneimianji==0)
    {
        alert("套内面积不能为空");
        return;
    } 
    if(data.value.jianzhumianji<60.0||data.value.jianzhumianji>300.0)
    {
        alert("建筑面积要求不得小于60不得大于300")
        return;
    }
   if(data.value.taoneimianji>data.value.jianzhumianji)
   {
        alert("套内面积必须小于建筑面积")
        return;
   }
    axios.post("https://localhost:7280/api/House/Add",data.value).then(res=>{
        if(res.data>0)
    {
        alert("添加成功！");
        location.href="/Show";
    }
    else
    {
        alert("添加失败！")
    }
    })
}
</script>

<style scoped>

</style>